﻿@model MagicKit<ProductItem>
<div>
    <div class="ui-box  ui-box-alpha">
        <div class="ui-box-head">
            <div class="ui-box-head-border">
                <div class="ui-box-head-title">
                    拍品管理
                </div>
                <span class="ui-box-head-text">添加拍品</span> 
                <a href="/auction" class="ui-box-head-more">返回拍品列表</a>
            </div>
        </div>
        <div class="ui-box-container">
            <div class="ui-box-content">
            </div>
        </div>
        <div class="ui-box-container-noborder">
            @if (Model != null)
            {
                <div class="ui-box-content">
                    @using (Html.BeginForm("create", "auction", FormMethod.Post, new { @class = "form-horizontal", role = "form", onsubmit = "return checkForm(this);" }))
                    {
                        if (Model.Data.ProductItemSkus.Count > 0)
                        {
                        <div id="form-group-for-skuId" class="form-group">
                            <label for="skuId" class="col-md-2 control-label">
                                拍品属性
                            </label>
                            <div class="col-md-10">
                                <select id="skuId" name="skuId" class="form-control">
                                    @foreach (var o in Model.Data.ProductItemSkus)
                                    {
                                        <option value="@(o.Id)">
                                            @foreach (var s in o.SkuProps)
                                            {
                                                <text>@(s.VName)</text>
                                            }
                                        </option>
                                    }
                                </select>
                                <p id="help-block-for-skuId" class="help-block">
                                    请选择拍品属性！</p>
                            </div>
                        </div>
                        }
                        <div id="form-group-for-level" class="form-group">
                            <label for="level" class="col-md-2 control-label">
                                拍品等级
                            </label>
                            <div class="col-md-10">
                                <select id="level" name="level" class="form-control">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                                <p id="help-block-for-level" class="help-block">
                                    请选择拍品等级！</p>
                            </div>
                        </div>
                        <div id="form-group-for-group" class="form-group">
                            <label for="group" class="col-md-2 control-label">
                                拍品分组
                            </label>
                            <div class="col-md-10">
                                <select id="group" name="group" class="form-control">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                                <p id="help-block-for-level" class="help-block">
                                    请选择拍品分组！</p>
                            </div>
                        </div>
                        <div id="form-group-for-name" class="form-group">
                            <label for="name" class="col-md-2 control-label">
                                拍品名称
                            </label>
                            <div class="col-md-10">
                                <input id="name" name="name" type="text" class="form-control" value="@(Model.Data.Name)" maxlength="60" autocomplete="off"
                                           required="required" placeholder="拍品名称" />
                                <p id="help-block-for-name" class="help-block">
                                    请输入拍品名称！</p>
                            </div>
                        </div>
                        <div id="form-group-for-price" class="form-group">
                            <label for="price" class="col-md-2 control-label">
                                每次消耗
                            </label>
                            <div class="col-md-10">
                                <input id="price" name="price" type="text" class="form-control" value="2" maxlength="2"
                                    autocomplete="off" required="required" placeholder="每次出价消耗拍币" onkeyup="this.value=this.value.replace(/\D/g,'');"/>
                                <p id="help-block-for-name" class="help-block">
                                    请输入每次出价消耗拍币！</p>
                            </div>
                        </div>
                        <div id="form-group-for-interval" class="form-group">
                            <label for="interval" class="col-md-2 control-label">
                                重置秒数
                            </label>
                            <div class="col-md-10">
                                <input id="interval" name="interval" type="text" class="form-control" value="60"
                                    maxlength="3" autocomplete="off" required="required" placeholder="重置秒数" onkeyup="this.value=this.value.replace(/\D/g,'');"/>
                                <p id="help-block-for-name" class="help-block">
                                    请输入重置秒数！</p>
                            </div>
                        </div>
                        <div id="form-group-for-startTime" class="form-group">
                            <label for="startTime" class="col-md-2 control-label">
                                开拍时间
                            </label>
                            <div class="col-md-10">
                                <input id="startTime" name="startTime" type="text" class="form-control" value="09:00:00"
                                    maxlength="8" autocomplete="off" required="required" placeholder="开拍时间" />
                                <p id="help-block-for-startTime" class="help-block">
                                    请输入开拍时间（默认 09:00:00）！</p>
                            </div>
                        </div>
                        <div id="form-group-for-stopTime" class="form-group">
                            <label for="stopTime" class="col-md-2 control-label">
                                停拍时间
                            </label>
                            <div class="col-md-10">
                                <input id="stopTime" name="stopTime" type="text" class="form-control" value="23:59:59"
                                    maxlength="8" autocomplete="off" required="required" placeholder="停拍时间" />
                                <p id="help-block-for-startTime" class="help-block">
                                    请输入停拍时间（默认 23:59:59）！</p>
                            </div>
                        </div>
                        
                        <div id="form-group-for-onlineDate" class="form-group">
                            <label for="onlineDate" class="col-md-2 control-label">
                                开始日期
                            </label>
                            <div class="col-md-10">
                                <input id="onlineDate" name="onlineDate" type="text" class="form-control datepicker" value="@(DateTime.Now.AddDays(1).Date.ToString("yyyy-MM-dd"))" maxlength="10" autocomplete="off"
                                       required="required" placeholder="开始日期" data-date-format="yyyy-mm-dd" readonly="readonly"/>
                                <p id="help-block-for-onlineData" class="help-block">
                                    请选择开始日期！</p>
                            </div>
                        </div>
                        <div id="form-group-for-adjust" class="form-group">
                            <label for="adjust" class="col-md-2 control-label">
                                附加费用
                            </label>
                            <div class="col-md-10">
                                <input id="adjust" name="adjust" type="text" class="form-control" value="10" maxlength="3"
                                    autocomplete="off" required="required" placeholder="附加费用" />
                                <p id="help-block-for-name" class="help-block">
                                    请输入运费/手续费/附加费！</p>
                            </div>
                        </div>
                        <div id="form-group-for-priceBuy" class="form-group">
                            <label for="priceBuy" class="col-md-2 control-label">
                                补差价格
                            </label>
                            <div class="col-md-10">
                                <input id="priceBuy" name="priceBuy" type="text" class="form-control" value="@(Model.Data.Price)" maxlength="8"
                                    autocomplete="off" required="required" placeholder="补差购买价格" />
                                <p id="help-block-for-name" class="help-block">
                                    请输入补差购买价格！</p>
                            </div>
                        </div>
                        <div id="form-group-for-priceMarket" class="form-group">
                            <label for="priceMarket" class="col-md-2 control-label">
                                市场价格
                            </label>
                            <div class="col-md-10">
                                <input id="priceMarket" name="priceMarket" type="text" class="form-control" value="@(Model.Data.Price)"
                                       maxlength="8" autocomplete="off" required="required" placeholder="市场价格" />
                                <p id="help-block-for-name" class="help-block">
                                    请输入市场价格！</p>
                            </div>
                        </div>
                        <div id="form-group-for-integralExchange" class="form-group">
                            <label for="integralExchange" class="col-md-2 control-label">
                                兑换积分
                            </label>
                            <div class="col-md-10">
                                <input id="integralExchange" name="integralExchange" type="text" class="form-control" value="@(Convert.ToInt32(Model.Data.Price * 0.7m * 100))"
                                       maxlength="10" autocomplete="off" required="required" placeholder="兑换积分" onkeyup="this.value=this.value.replace(/\D/g,'');"/>
                                <p id="help-block-for-integralExchange" class="help-block">
                                    请输入该拍品可兑换积分数（0为不可兑换积分）！</p>
                            </div>
                        </div>
                        <div id="diffbuy" style="display: none;">
                            <div id="form-group-for-diffBuyLimit" class="form-group">
                                <label for="diffBuyLimit" class="col-md-2 control-label">
                                    补差购买限制
                                </label>
                                <div class="col-md-10">
                                    <select id="diffBuyLimit" name="diffBuyLimit" class="form-control">
                                        <option value="0">无限制</option>
                                        <option value="1">总共限制N个</option>
                                        <option value="2">每人限制N个</option>
                                    </select>
                                    <p id="help-block-for-diffBuyLimit" class="help-block">
                                        请选择补差购买限制！</p>
                                </div>
                            </div>
                            <div id="form-group-for-diffBuyLimitValue" class="form-group">
                                <label for="diffBuyLimitValue" class="col-md-2 control-label">
                                    补差购买限制值
                                </label>
                                <div class="col-md-10">
                                    <input id="diffBuyLimitValue" name="diffBuyLimitValue" type="text" class="form-control"
                                        value="" maxlength="3" autocomplete="off" placeholder="补差购买限制值" onkeyup="this.value=this.value.replace(/\D/g,'');"/>
                                    <p id="help-block-for-diffBuyLimitValue" class="help-block">
                                        请输入该拍品可补差购买限制值（当补差购买限制为无限制时该值将被忽略）！</p>
                                </div>
                            </div>
                        </div>
                        <div id="freeBid" style="display: none;">
                            <div id="form-group-for-freeBidLimit" class="form-group">
                                <label for="diffBuyLimit" class="col-md-2 control-label">
                                    免费拍币限制
                                </label>
                                <div class="col-md-10">
                                    <select id="freeBidLimit" name="freeBidLimit" class="form-control">
                                        <option value="0">无限制</option>
                                        <option value="1">总共限制N次出价</option>
                                        <option value="2">每人限制N次出价</option>
                                    </select>
                                    <p id="help-block-for-diffBuyLimit" class="help-block">
                                        请选择可使用免费拍币限制！</p>
                                </div>
                            </div>
                            <div id="form-group-for-freeBidLimitValue" class="form-group">
                                <label for="freeBidLimitValue" class="col-md-2 control-label">
                                    免费拍币限制值
                                </label>
                                <div class="col-md-10">
                                    <input id="freeBidLimitValue" name="freeBidLimitValue" type="text" class="form-control"
                                        value="" maxlength="4" autocomplete="off" placeholder="免费拍币限制值" onkeyup="this.value=this.value.replace(/\D/g,'');"/>
                                    <p id="help-block-for-diffBuyLimitValue" class="help-block">
                                        请输入该拍品可使用免费拍币限制值（当免费拍币限制为无限制时该值将被忽略）！</p>
                                </div>
                            </div>
                        </div>
                        <div id="dynamic" style="display: none;">
                            <div id="form-group-for-alternatePrice" class="form-group">
                                <label for="alternatePrice" class="col-md-2 control-label">
                                    动态调整价格
                                </label>
                                <div class="col-md-10">
                                    <input id="alternatePrice" name="alternatePrice" type="text" class="form-control"
                                        value="" maxlength="8" autocomplete="off" />
                                    <p id="help-block-for-alternatePrice" class="help-block">
                                        请输入动态调整价格（当拍品当前出价价格达到动态调整价格时将更新拍品的重置秒数）！</p>
                                </div>
                            </div>
                            <div id="form-group-for-alternateInterval" class="form-group">
                                <label for="alternateInterval" class="col-md-2 control-label">
                                    动态重置秒数
                                </label>
                                <div class="col-md-10">
                                    <input id="alternateInterval" name="alternateInterval" type="text" class="form-control"
                                        value="" maxlength="3" autocomplete="off" onkeyup="this.value=this.value.replace(/\D/g,'');"/>
                                    <p id="help-block-for-alternateInterval" class="help-block">
                                        请输入动态重置秒数（当拍品当前出价价格达到动态调整价格时将更新拍品的重置秒数）！</p>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <div class="checkbox">
                                    <ul class="list-inline">
                                        <li style="margin-left: 0px; margin-right: 20px;">
                                            <label>
                                                <input type="checkbox" name="reservation" value="false" onclick="if (this.checked==true){this.value=true;}else{this.value=false;}" />
                                                <span>预约竞购</span>
                                            </label>
                                        </li>
                                        <li style="margin-left: 0px; margin-right: 20px;">
                                            <label>
                                                <input type="checkbox" name="diffBuy" value="false" onclick="if (this.checked==true){this.value=true;$('#diffbuy').show();}else{this.value=false;$('#diffbuy').hide();}" />
                                                <span>充许补差购买</span>
                                            </label>
                                        </li>
                                        <li style="margin-left: 0px; margin-right: 20px;">
                                            <label>
                                                <input type="checkbox" name="freeBid" value="false" onclick="if (this.checked==true){this.value=true;$('#freeBid').show();}else{this.value=false;$('#freeBid').hide();}" />
                                                <span>充许使用免费拍币</span>
                                            </label>
                                        </li>
                                        <li style="margin-left: 0px; margin-right: 20px;">
                                            <label>
                                                <input type="checkbox" name="dynamic" value="false" onclick="if (this.checked==true){this.value=true;$('#dynamic').show();}else{this.value=false;$('#dynamic').hide();}" />
                                                <span>动态调整重置秒数</span>
                                            </label>
                                        </li>
                                        <li style="margin-left: 0px; margin-right: 20px;">
                                            <label>
                                                <input type="checkbox" name="isZero" value="false" onclick="if (this.checked==true){this.value=true;}else{this.value=false;}" />
                                                <span>0元竞购</span>
                                            </label>
                                        </li>
                                        <li style="margin-left: 0px; margin-right: 20px;">
                                            <label>
                                                <input type="checkbox" name="isAuto" value="false" onclick="if (this.checked==true){this.value=true;}else{this.value=false;}" />
                                                <span>自动补货</span>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-3">
                                <button id="btn-submit" class="ui-btn ui-btn-alpha" type="submit" data-default-text="保 存"
                                    data-loading-text="数据提交中...">
                                    保 存</button>
                            </div>
                            <div class="col-md-7">
                                <p id="result-message">
                                </p>
                            </div>
                        </div>
                    }
                </div>
            }
        </div>
    </div>
</div>
@section css
{
    <link rel="stylesheet" type="text/css" href="http://todc.github.io/todc-datepicker/assets/css/todc-datepicker.css" />
}
@section js{
    <script type="text/javascript">
        function checkForm(form) {
            var action = form.action;
            var param = $(form).serialize();
            $('#btn-submit').button('loading');
            $.postJSON(action, param, function (result) {
                if (result.Status) {
                    $('#btn-submit').attr('disabled', 'disabled').text('保存(已禁用)');
                    $('#result-message').removeClass('text-danger').addClass('text-success').html('添加拍品成功！');
                    window.setTimeout(function () { $('#result-message').html('') }, 2000);
                } else {
                    var target = result.Data;
                    if (target != null && target != '') {
                        var formgroup = "#form-group-for-" + target;
                        $(formgroup).addClass('has-error');
                        $("input[name='" + target + "']").focus();
                        $('#btn-submit').button('default');
                    } else {
                        $('#result-message').removeClass('text-success').addClass('text-danger').html(result.Message);
                    }
                    $('#btn-submit').button('default');
                }
            });
            return false;
        }

        $(function () {
            $('select').select2();
            $('.datepicker').datepicker({ startDate: new Date() });
            /*
            $('[data-rel="popover"]').popover();
            $('#modal').on('hidden.bs.modal', function () {
            $(this).empty().removeData('bs.modal');
            });
            */
        });

    </script>
}
